<div class="row nav nav-boxes mv-30 notifier-types">
  {{#each types as |item|}}
    <a
      {{action "switchType" item.type}}
      class="col span-2 nav-box-item driver {{if (eq item.type "smtp") "email"}} {{if (eq item.type currentType) "active" ""}}"
      disabled={{item.disabled}}
      alt={{item.type}}
    >
      <div class="{{item.type}}"></div>
      {{#if item.label}}
        <p>{{t item.label}}</p>
      {{/if}}
    </a>
  {{/each}}
</div>
<hr />

{{#if (eq currentType "slack")}}
  <div class="row">
    <div class="col span-12 mt-0 mb-0">
      {{form-name-description
        name=model.name
        nameDisabled=false
        nameRequired=true
        description=model.description
        bothColClass="col span-6 mt-0"
        colClass="col span-12 mt-0"
      }}
    </div>
  </div>
  <div class="row">
    <div class="col span-12">
      <div class="acc-label text-capitalize">
        {{t "notifierPage.slack.url"}}{{field-required}}
      </div>
      {{input
        classNames="form-control"
        value=model.slackConfig.url
        placeholder=(t "notifierPage.slack.urlPlaceholder")
      }}
    </div>
  </div>
  <div class="row">
    <div class="col span-12">
      <div class="acc-label text-capitalize">
        {{t "notifierPage.slack.defaultRecipient.label"}}
      </div>
      {{input
        classNames="form-control"
        value=model.slackConfig.defaultRecipient
        placeholder=(t "notifierPage.slack.defaultRecipientPlaceholder")
      }}
      <p class="help-block text-info text-small">
        {{t "notifierPage.slack.defaultRecipient.helpText"}}
      </p>
    </div>
  </div>
  <div class="row">
    <div class="col span-12">
      <label
        class="acc-label text-capitalize"
        for="input-slack-config-proxy-url"
      >
        {{t "notifierPage.proxyUrl.label"}}
      </label>
      {{input
        classNames="form-control"
        id="input-slack-config-proxy-url"
        value=model.slackConfig.proxyUrl
        placeholder=(t "notifierPage.proxyUrl.placeholder")
      }}
    </div>
  </div>
  <div class="row">
    <div class="col span-6">
      <label class="acc-label">
        {{t "notifierPage.sendResolved.label"}}
      </label>
      <div class="checkbox">
        <label>
          {{input
            type="checkbox"
            checked=model.sendResolved
          }}
          {{t "generic.enable"}}
        </label>
      </div>
    </div>
  </div>
{{else if (eq currentType "email")}}
  <div class="row">
    <div class="col span-12 mt-0 mb-0">
      {{form-name-description
        name=model.name
        nameDisabled=false
        nameRequired=true
        description=model.description
        bothColClass="col span-6 mt-0"
        colClass="col span-12 mt-0"
      }}
    </div>
  </div>

  <div class="acc-label text-capitalize">
    {{t "notifierPage.smtp.server"}}
  </div>
  <section class="box">
    <div>
      <div class="acc-label text-capitalize">
        {{t "notifierPage.smtp.sender"}}{{field-required}}
      </div>
      {{input
        type="text"
        autocomplete="off"
        classNames="form-control"
        value=model.smtpConfig.sender
      }}
    </div>

    <div class="row">
      <div class="col span-6">
        <div class="acc-label text-capitalize">
          {{t "notifierPage.smtp.host"}}{{field-required}}
        </div>
        {{input
          classNames="form-control"
          value=model.smtpConfig.host
          placeholder=(t "notifierPage.smtp.hostPlaceholder")
        }}
      </div>
      <div class="col span-4">
        <div class="acc-label text-capitalize">
          {{t "notifierPage.smtp.port"}}{{field-required}}
        </div>
        {{input
          classNames="form-control"
          value=model.smtpConfig.port
          placeholder=(t "notifierPage.smtp.portPlaceholder")
        }}
      </div>
      <div class="col span-2" style="margin-top: 43px;">
        {{input
          type="checkbox"
          classNames="form-control"
          checked=model.smtpConfig.tls
        }}
        {{t "notifierPage.smtp.tls"}}
      </div>
    </div>
    <div class="row">
      <div class="col span-6">
        <div class="acc-label text-capitalize">
          {{t "notifierPage.smtp.userName"}}
        </div>
        {{input
          classNames="form-control"
          autocomplete="off"
          value=model.smtpConfig.username
          placeholder=(t "notifierPage.smtp.userNamePlaceholder")
        }}
      </div>
      <div class="col span-6">
        <div class="acc-label text-capitalize">
          {{t "notifierPage.smtp.password"}}
        </div>
        {{input
          type="password"
          autocomplete="off"
          classNames="form-control"
          value=model.smtpConfig.password
          placeholder=(t "notifierPage.smtp.passwordPlaceholder")
        }}
      </div>
    </div>
  </section>
  <div class="row">
    <div class="col span-6">
      <div class="acc-label text-capitalize">
        {{t "notifierPage.smtp.defaultRecipient.label"}}{{field-required}}
      </div>
      {{input
        classNames="form-control"
        value=model.smtpConfig.defaultRecipient
        placeholder=(t "notifierPage.smtp.defaultRecipientPlaceholder")
      }}
      <p class="help-block text-info text-small">{{t "notifierPage.smtp.defaultRecipient.helpText"}}</p>
    </div>
  </div>
  <div class="row">
    <div class="col span-6">
      <label class="acc-label">
        {{t "notifierPage.sendResolved.label"}}
      </label>
      <div class="checkbox">
        <label>
          {{input
            type="checkbox"
            checked=model.sendResolved
          }}
          {{t "generic.enable"}}
        </label>
      </div>
    </div>
  </div>
{{else if (eq currentType "pagerduty")}}
  <div class="row">
    <div class="col span-12 mt-0 mb-0">
      {{form-name-description
        name=model.name
        nameDisabled=false
        nameRequired=true
        description=model.description
        bothColClass="col span-6 mt-0"
        colClass="col span-12 mt-0"
      }}
    </div>
  </div>
  <div class="row">
    <div class="col span-12">
      <div class="acc-label text-capitalize">
        {{t "notifierPage.pagerduty.serviceKey.label"}}{{field-required}}
      </div>
      {{input
        classNames="form-control"
        value=model.pagerdutyConfig.serviceKey
        placeholder=(t "notifierPage.pagerduty.serviceKeyPlaceholder")
      }}
    </div>
    <p class="help-block text-info text-small">
      {{t "notifierPage.pagerduty.serviceKey.helpText"}}
    </p>
  </div>
  <div class="row">
    <div class="col span-12">
      <label
        class="acc-label text-capitalize"
        for="input-pagerduty-config-proxy-url"
      >
        {{t "notifierPage.proxyUrl.label"}}
      </label>
      {{input
        classNames="form-control"
        id="input-pagerduty-config-proxy-url"
        value=model.pagerdutyConfig.proxyUrl
        placeholder=(t "notifierPage.proxyUrl.placeholder")
      }}
    </div>
  </div>
  <div class="row">
    <div class="col span-6">
      <label class="acc-label">
        {{t "notifierPage.sendResolved.label"}}
      </label>
      <div class="checkbox">
        <label>
          {{input
            type="checkbox"
            checked=model.sendResolved
          }}
          {{t "generic.enable"}}
        </label>
      </div>
    </div>
  </div>
{{else if (eq currentType "wechat")}}
  <div class="row">
    <div class="col span-12 mt-0 mb-0">
      {{form-name-description
        name=model.name
        nameDisabled=false
        nameRequired=true
        description=model.description
        bothColClass="col span-6 mt-0"
        colClass="col span-12 mt-0"
      }}
    </div>
  </div>
  <div class="row">
    <div class="col span-6">
      <div class="acc-label text-capitalize">
        {{t "notifierPage.wechat.corp.label"}}{{field-required}}
      </div>
      {{input
        classNames="form-control"
        value=model.wechatConfig.corp
        placeholder=(t "notifierPage.wechat.corpPlaceholder")
      }}
      <p class="help-block">
        {{t "notifierPage.wechat.corp.helpText" htmlSafe=true}}
      </p>
    </div>
    <div class="col span-6">
      <div class="acc-label text-capitalize">
        {{t "notifierPage.wechat.agent.label"}}{{field-required}}
      </div>
      {{input
        classNames="form-control"
        value=model.wechatConfig.agent
        placeholder=(t "notifierPage.wechat.agentPlaceholder")
      }}
      <p class="help-block">
        {{t "notifierPage.wechat.agent.helpText" htmlSafe=true}}
      </p>
    </div>
  </div>
  <div class="row">
    <div class="col span-6">
      <div class="acc-label text-capitalize">
        {{t "notifierPage.wechat.secret.label"}}{{field-required}}
      </div>
      {{input
        classNames="form-control"
        value=model.wechatConfig.secret
        placeholder=(t "notifierPage.wechat.secretPlaceholder")
      }}
      <p class="help-block">{{t "notifierPage.wechat.secret.helpText" htmlSafe=true}}</p>
    </div>
    <div class="col span-6">
      <div class="acc-label text-capitalize">
        {{t "notifierPage.wechat.recipientType.label"}}{{field-required}}
      </div>
      {{new-select
        localizedLabel=true
        classNames="form-control"
        content=recipientTypes
        value=model.wechatConfig.recipientType
      }}
    </div>
  </div>
  <div class="row">
    <div class="col span-12">
      <div class="acc-label text-capitalize">
        {{t "notifierPage.wechat.defaultRecipient.label"}}{{field-required}}
      </div>
      {{input
        classNames="form-control"
        value=model.wechatConfig.defaultRecipient
        placeholder=(t "notifierPage.wechat.defaultRecipientPlaceholder")
      }}
    </div>
  </div>
  <div class="row">
    <div class="col span-12">
      <label
        class="acc-label text-capitalize"
        for="input-notifierpage-config-proxy-url"
      >
        {{t "notifierPage.proxyUrl.label"}}
      </label>
      {{input
        classNames="form-control"
        id="input-notifierpage-config-proxy-url"
        value=model.wechatConfig.proxyUrl
        placeholder=(t "notifierPage.proxyUrl.placeholder")
      }}
    </div>
  </div>
  <div class="row">
    <div class="col span-6">
      <label class="acc-label">
        {{t "notifierPage.sendResolved.label"}}
      </label>
      <div class="checkbox">
        <label>
          {{input
            type="checkbox"
            checked=model.sendResolved
          }}
          {{t "generic.enable"}}
        </label>
      </div>
    </div>
  </div>
{{else if (eq currentType "webhook")}}
  <div class="row">
    <div class="col span-12 mt-0 mb-0">
      {{form-name-description
        name=model.name
        nameRequired=true
        nameDisabled=false
        description=model.description
        bothColClass="col span-6 mt-0"
        colClass="col span-12 mt-0"
      }}
    </div>
  </div>
  <div class="row">
    <div class="col span-12">
      <div class="acc-label text-capitalize">
        {{t "notifierPage.webhook.url"}}{{field-required}}
      </div>
      {{input
        classNames="form-control"
        value=model.webhookConfig.url
        placeholder=(t "notifierPage.webhook.urlPlaceholder")
      }}
    </div>
  </div>
  <div class="row">
    <div class="col span-12">
      <label
        class="acc-label text-capitalize"
        for="input-webhook-config-proxy-url"
      >
        {{t "notifierPage.proxyUrl.label"}}
      </label>
      {{input
        classNames="form-control"
        id="input-webhook-config-proxy-url"
        value=model.webhookConfig.proxyUrl
        placeholder=(t "notifierPage.proxyUrl.placeholder")
      }}
    </div>
  </div>
  <div class="row">
    <div class="col span-6">
      <label class="acc-label">
        {{t "notifierPage.sendResolved.label"}}
      </label>
      <div class="checkbox">
        <label>
          {{input
            type="checkbox"
            checked=model.sendResolved
          }}
          {{t "generic.enable"}}
        </label>
      </div>
    </div>
  </div>
{{else if (eq currentType "dingtalk")}}
  <div class="row">
    <div class="col span-12 mt-0 mb-0">
      <FormNameDescription
        @name={{model.name}}
        @nameRequired={{true}}
        @nameDisabled={{false}}
        @description={{model.description}}
        @bothColClass="col span-6 mt-0"
        @colClass="col span-12 mt-0"
      />
    </div>
  </div>
  <div class="row">
    <div class="col span-12">
      <div class="acc-label text-capitalize">
        {{t "notifierPage.dingtalk.url"}}{{field-required}}
      </div>
      <Input
        @type="text"
        @value={{model.dingtalkConfig.url}}
        @placeholder={{t "notifierPage.dingtalk.urlPlaceholder"}}
        @classNames="form-control"
      />
    </div>
  </div>
   <div class="row">
    <div class="col span-12">
      <div class="acc-label text-capitalize">
        {{t "notifierPage.dingtalk.secret"}}
      </div>
      <Input
        @type="text"
        @value={{model.dingtalkConfig.secret}}
        @placeholder={{t "notifierPage.dingtalk.secretPlaceholder"}}
        @classNames="form-control"
      />
    </div>
  </div>
  <div class="row">
    <div class="col span-12">
      <label
        class="acc-label text-capitalize"
        for="input-dingtalk-config-proxy-url"
      >
        {{t "notifierPage.proxyUrl.label"}}
      </label>
      <Input
        @type="text"
        @value={{model.dingtalkConfig.proxyUrl}}
        @id="input-dingtalk-config-proxy-url"
        @placeholder={{t "notifierPage.proxyUrl.placeholder"}}
        @classNames="form-control"
      />
    </div>
  </div>
  <div class="row">
    <div class="col span-6">
      <label class="acc-label">
        {{t "notifierPage.sendResolved.label"}}
      </label>
      <div class="checkbox">
        <label>
          <Input
            @type="checkbox"
            @checked={{model.sendResolved}}
          />
          {{t "generic.enable"}}
        </label>
      </div>
    </div>
  </div>
{{else if (eq currentType "msteams")}}
  <div class="row">
    <div class="col span-12 mt-0 mb-0">
      <FormNameDescription
        @name={{model.name}}
        @nameRequired={{true}}
        @nameDisabled={{false}}
        @description={{model.description}}
        @bothColClass="col span-6 mt-0"
        @colClass="col span-12 mt-0"
      />
    </div>
  </div>
  <div class="row">
    <div class="col span-12">
      <div class="acc-label text-capitalize">
        {{t "notifierPage.msteams.url"}}{{field-required}}
      </div>
      <Input
        @type="text"
        @value={{model.msteamsConfig.url}}
        @placeholder={{t "notifierPage.msteams.urlPlaceholder"}}
        @classNames="form-control"
      />
    </div>
  </div>
  <div class="row">
    <div class="col span-12">
      <label
        class="acc-label text-capitalize"
        for="input-microsoft-config-proxy-url"
      >
        {{t "notifierPage.proxyUrl.label"}}
      </label>
       <Input
          @type="text"
          @value={{model.msteamsConfig.proxyUrl}}
          @id="input-msteams-config-proxy-url"
          @placeholder={{t "notifierPage.proxyUrl.placeholder"}}
          @classNames="form-control"
        />
    </div>
  </div>
  <div class="row">
    <div class="col span-6">
      <label class="acc-label">
        {{t "notifierPage.sendResolved.label"}}
      </label>
      <div class="checkbox">
        <label>
           <Input
            @type="checkbox"
            @checked={{model.sendResolved}}
           />
          {{t "generic.enable"}}
        </label>
      </div>
    </div>
  </div>
{{/if}}

{{#if (eq currentType "slack")}}
  <div class="">
    {{t "notifierPage.slack.helpText" htmlSafe=true}}
  </div>
{{/if}}

{{top-errors errors=errors}}

{{#if (eq currentType "pagerduty")}}
  {{t "notifierPage.pagerduty.helpText" htmlSafe=true}}
{{/if}}

{{#if isSelectType}}
  <div class="over-hr mt-40">
    <span>
      {{#if testing}}
        <button
          style="color: white;"
          class="btn bg-info btn-disabled" type="button" {{action "test"}}
        >
          <i class="icon icon-spinner icon-spin"></i>{{t "notifierPage.testAction.testing"}}
        </button>
      {{else}}
        {{#if tested}}
          <button
            class="btn  btn-disabled {{if testOk "bg-success" "bg-error"}}"
            style="color: white;" type="button" {{action "test"}}
          >
            {{if testOk (t "notifierPage.testAction.testOk") (t "notifierPage.testAction.testFailed")}}
          </button>
        {{else}}
          <button
            class="btn bg-info"
            style="color: white;" type="button" {{action "test"}}
          >
            {{t "notifierPage.testAction.test"}}
          </button>
        {{/if}}
      {{/if}}
    </span>
  </div>
{{/if}}

<div class="footer-actions">
  {{save-cancel
    createLabel=addBtnLabel
    save=(action "save")
    cancel=(action "cancel")
    saveDisabled=(not isSelectType)
  }}
</div>
